<template>
	<view>

		<view class="page-body">
			<form @submit="formSubmit" @reset="formReset">

				<view class="page-section">
				<!-- 	<view class="input-list">

						<view class="uni-list-cell">
							<view class="list-left">
								介绍人ID：
							</view>
							<input class="uni-input" name="input" v-model="invite_code" placeholder="介绍人ID" />
						</view>
					</view> -->
					<view class="input-list">

						<view class="uni-list-cell">
							<view class="list-left">
								用户名：
							</view>
							<input class="uni-input" name="input" v-model="name" placeholder="用户名" />
						</view>
					</view>
					<view class="input-list">

						<view class="uni-list-cell">
							<view class="list-left">
								输入密码：
							</view>
							<input class="uni-input" name="password" v-model="password" placeholder="请输入密码" :password="showPassword" />
							<view class="uni-icon uni-icon-eye" :class="[!showPassword ? 'uni-active' : '']" @click="changePassword"></view>

						</view>
					</view>
					<view class="input-list">

						<view class="uni-list-cell">
							<view class="list-left">
								确认密码：
							</view>
							<input class="uni-input" name="password" v-model="password_confirmation" placeholder="请确认密码" :password="showPassword" />
							<view class="uni-icon uni-icon-eye" :class="[!showPassword ? 'uni-active' : '']" @click="changePassword"></view>

						</view>
					</view>
					<!-- <view class="input-list">
						<view class="uni-list-cell">
							<view class="list-left">
								提款密码：
							</view>
							<input class="uni-input" name="input" v-model="qk_pwd" placeholder="提款密码(6位纯数字)" />
						</view>
					</view> -->
					<view class="input-list">

						<view class="uni-list-cell">
							<view class="list-left">
								真实姓名：
							</view>
							<input class="uni-input" name="input" v-model="real_name" placeholder="真实姓名(与银行卡开户人相同)" />
						</view>
					</view>
					<view class="input-list">
						<view class="uni-list-cell">
							<view class="list-left">
								手机号：
							</view>
							<input class="uni-input" name="input" v-model="phone" placeholder="手机号码" />
						</view>
					</view>
					<!-- <view class="input-list">
						<view class="uni-list-cell">
							<input class="uni-input" name="input" v-model="captcha" placeholder="*验证码" />
                             <view  > 
							   <image class="captcha_img" :src="image" @tap="re_captcha()"></image>

							 </view>
                           
						</view>
					</view> -->
				</view>

				<view class="btn-area">
					<button class="btn-submit" formType="submit" :loading="loading">注册</button>
					<button type="default" formType="reset">取消</button>

				</view>
			</form>
			<view class='title'>
				<text>备注：</text></br>
				<text>1.提款密码必须为6位数的数字；</text></br>
				<text>2.姓名必须与你用于提款的银行户口名字一致，否则无法提款。</text>
			</view>


		</view>
	</view>
</template>
<script>
	import CryptoJS from "../../components/crypto-js";
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				token: '',
				pickerHidden: true,
				chosen: '',
				image: '',
				showPassword: true,
				invite_code: '',
				i_code: '',
				t_name: '',
				name: '',
				password: '',
				password_confirmation: '',
				real_name: '',
				phone: '',
				check1: 1,
				loading: false

			}
		},
		onLoad() {
			//this.image =  this.apiUrl + 'kit/captcha/1';
			console.log('image:' + this.image);
		},
		computed: mapState(['forcedLogin', 'hasLogin', 'userName', 'apiUrl', 'gameApiUrl', 'gameApiId', 'gameApiSecret']),
		methods: {
			...mapMutations(['login','back','storeMoney','storeToken']),
			changePassword: function() {
				this.showPassword = !this.showPassword;
			},
			formSubmit: function(e) {
				if (this.name.length < 5) {
					uni.showToast({
						icon: 'none',
						title: '账号最短为 5 个字符'
					});
					return;
				}
				if (this.password.length < 7) {
					uni.showToast({
						icon: 'none',
						title: '密码最短为 7 个字符'
					});
					return;
				}
				if (this.password_confirmation.length < 6) {
					uni.showToast({
						icon: 'none',
						title: '两次密码不一致'
					});
					return;
				}
				if (this.real_name.length < 2) {
					uni.showToast({
						icon: 'none',
						title: '真实姓名不正确'
					});
					return;
				}
				if (this.phone.length < 11) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确手机号'
					});
					return;
				}

				const data = {
					check1: 1,
					name: this.name,
					password: this.password,
					password_confirmation: this.password_confirmation,
					real_name: this.real_name,
					phone: this.phone,

				};

				this.loading = true;
				uni.request({
					url: this.apiUrl + 'app/register',
					method: 'POST',
					data: data,
					success: (data) => {
						console.log('fail' + JSON.stringify(data));

						//{"code":1,"msg":"\u767b\u5f55\u6210\u529f","data":{"member":{"id":444,"name":"lumen123","real_name":"\u5510sss","email":null,"phone":null,"qq":null,"weixin":null,"address":null,"money":"0.00"},"token":"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9tLmNodWFucWk2NjgueHl6XC9hcHBcL2xvZ2luIiwiaWF0IjoxNTM4MjA2NjA2LCJleHAiOjE1MzgyMTAyMDYsIm5iZiI6MTUzODIwNjYwNiwianRpIjoiTjdpa3FMY2RnVUdKazhaMyIsInN1YiI6NDQ0LCJwcnYiOiI4NjY1YWU5Nzc1Y2YyNmY2YjhlNDk2Zjg2ZmE1MzZkNjhkZDcxODE4Iiwiand0bmFtZSI6Im1lbWJlciJ9.zxXBXGl-lQ9Dq9Mk9-b2PBaf_n__Zb14Eqg5iSw0ezQ"}}
						let msg = data.data.msg;
						uni.showToast({
							icon: 'none',
							title: msg
						});
						if (data.data.code == 1) {
							console.log('monye' + data.data.data.member.money);
							this.money = data.data.data.member.money;
							this.token = data.data.data.token;
							this.toMain(this.account, this.money, this.token);
						}
					},
					fail: (data, code) => {
						console.log('fail' + JSON.stringify(data));
					},
					complete: () => {
						this.loading = false
					}
				})


			},
			toMain(userName, mainMoney, token) {
				this.login(userName);
				this.storeMoney(mainMoney);
				this.storeToken(token);

				uni.reLaunch({
					url: 'index',
				});
			},

			toBack() {
				uni.navigateBack();

				//this.back();
				console.log('111');
			},
			re_captcha() {
				this.image = this.apiUrl + 'kit/captcha/' + Math.random();
			},
			formReset: function(e) {
				console.log("清空数据")
				this.chosen = ''
			}

		}
	}
</script>

<style>
	label {
		display: flex;
		flex-direction: row;
		min-width: 270upx;
		margin-right: 20upx;
	}

	page {
		background-color: white;
		padding-top: 50upx;

	}

	.title {
		padding: 40rpx 40rpx;
		font-size: 30upx;
	}

	.captcha_img {
		width: 150upx;
		height: 90upx;
		margin-top: 10upx;
	}

	.list-left {
		width: 200upx;
		padding-left: 20upx;
	}

	.uni-list-cell {
		height: 90upx;
		widht: 90%;

	}

	.btn-submit {
		background-color: #007aff;
		color: #ffffff;
	}

	.uni-input {
		width: 80%;

	}

	.uni-list:before {
		position: absolute;
		z-index: 10;
		right: 0;
		top: 0;
		left: 0;
		height: 0rpx;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;

	}

	.uni-list-cell:after {
		position: absolute;
		right: 30rpx;
		bottom: 0;
		left: 0rpx;
		height: 1rpx;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;

	}
</style>
